<template>
  <yd-layout class = "confirmation">
    <v-header slot="navbar" title="确认订单">
      <div @click="back" slot="left">
        <yd-navbar-back-icon/>
      </div>
    </v-header>
    <yd-cell-group class = "group">
      <yd-cell-item arrow>
        <span  class = "label" slot="left">包子</span>
        <span slot="left">13811112222</span>
      </yd-cell-item>
      <yd-cell-item>
        <div slot="left">
          <span class = "label">北京市</span>
          <span>市辖区</span>
          <span>朝阳区望京SOHO1号塔</span>
        </div>
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group class = "group group_list">
      <yd-cell-item class = "group_li">
        <box slot="left" bgImg="http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg" class="logo"></box>
        <span slot="left">企业名称</span>
      </yd-cell-item>
      <yd-cell-item class = "group_li">
        <box slot="left" bgImg="http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg" class="comm_logo"></box>
        <div class="comm_name" slot="left">
          <h3>北四县自产旬邑苹果</h3>
          <div class="desc">净含量：5斤</div>
          <div class="primary">500积分+¥ 39.90</div>
        </div>
        <span class = "bottom" slot="right">*1</span>
      </yd-cell-item>
      <yd-cell-item class = "group_li">
        <span class="label" slot = "left">配送方式</span>
        <span slot="right">快递    ¥0.00</span>
      </yd-cell-item>
      <yd-cell-item class = "group_li">
        <span class="label" slot = "left">买家留言</span>
        <span slot="left">选填</span>
      </yd-cell-item>
      <yd-cell-item class = "group_li">
        <span slot="right">共1件产品    小计  <span class="primary">500积分+¥ 39.90</span></span>
      </yd-cell-item>
    </yd-cell-group>

    <yd-flexbox slot = "tabbar">
      <yd-flexbox-item class = "text-center">需支付： <span class="primary">500积分+¥ 39.90</span></yd-flexbox-item>
      <yd-button class = "btn" @click.native = "push('/payment')">立即帮扶</yd-button>
    </yd-flexbox>
  </yd-layout>
</template>
<script>
export default {
  name: 'confirmation'
}
</script>
<style lang="scss" scoped>
  .confirmation{
    .group{
      span{
        margin-right: .1rem;
        &.label{
          width: 4em;
        }
      }
      /deep/ .yd-cell-right{
        min-height: .64rem;
      }
    }
    .group_list{
      .group_li{
        padding-top: $mini-padding;
        padding-bottom: $mini-padding;
        box-sizing: border-box;
        border-top: 1px solid #ddd;
        &:first-of-type{
          border: none;
        }
      }
      .logo{
        width: .8rem;
        border-radius: 4rem;
        margin-right: .2rem;
      }
      .comm_logo{
        width: 2rem;
        margin-right: .2rem;
      }
      .comm_name{
        align-self: flex-start;
        .desc{
          margin: .3rem 0;
        }
      }
      .bottom{
        align-self: flex-end;
      }
    }
    .btn{
      width: 3.58rem;
      height: .8rem;
    }
  }
</style>
